<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            overflow-x: hidden;
            background-color: #f0f0f0;
        }
        .moving-text {
            position: fixed;
            font-size: 24px;
            color: #333;
            white-space: nowrap;
            right: 0;
        }
    </style>
</head>
<body>
    <script>
        const texts = ['你好', '世界', 'Hello', 'World', '动画', '测试'];
        const speeds = [2, 3, 4, 5]; // 不同的移动速度（像素/帧）
        let elements = [];

        function createMovingText() {
            const span = document.createElement('span');
            span.className = 'moving-text';
            span.textContent = texts[Math.floor(Math.random() * texts.length)];
            span.style.top = `${Math.random() * (window.innerHeight - 50)}px`;
            span.dataset.speed = speeds[Math.floor(Math.random() * speeds.length)];
            // 设置初始位置在屏幕左侧
            span.style.right = `${window.innerWidth}px`;
            document.body.appendChild(span);
            elements.push(span);
        }

        function animate() {
            elements = elements.filter(element => {
                const currentRight = parseFloat(element.style.right);
                const newRight = currentRight - parseFloat(element.dataset.speed);
                element.style.right = `${newRight}px`;

                // 当元素完全移出屏幕右侧时删除它
                if (newRight < -element.offsetWidth) {
                    element.remove();
                    return false;
                }
                return true;
            });

            // 随机创建新元素
            if (Math.random() < 0.02 && elements.length < 10) {
                createMovingText();
            }

            requestAnimationFrame(animate);
        }

        // 初始创建一些元素
        for (let i = 0; i < 5; i++) {
            createMovingText();
        }

        // 开始动画
        requestAnimationFrame(animate);

        // 监听窗口大小变化，更新元素位置
        window.addEventListener('resize', () => {
            elements.forEach(element => {
                const currentRight = parseFloat(element.style.right);
                // 如果元素还在屏幕左侧，则更新其位置
                if (currentRight > 0) {
                    element.style.right = `${window.innerWidth}px`;
                }
            });
        });
    </script>
</body>
</html>